<template>
	<view>
		<view class="remind">
			<!-- 记账提醒 -->
			<view class="remind_time remind_container bgc">
				<view class="left">提醒时间</view>
				<view class="right">
					<view class="time" @click="showTime">
						9:00
					</view>
					<u-icon name="arrow-right" :bold="true" color="#ccc" @click="showTime"></u-icon>
				</view>
			</view>

			<view class="remind_container nobgc">
				<view class="left">提醒内容</view>
			</view>

			<view class="remind_container bgc">
				<u-input type="text" :focus="true" fontSize="16" border="none" v-model="iptVal"></u-input>
			</view>

			<view class="remind_container bgcpink">
				<view class="left" v-if="isShowClose">开启</view>
				<view class="left" v-else>关闭</view>
			</view>
		</view>
		<view>
			<u-datetime-picker 
			title="time"
			:show="show" 
			v-model="value" 
			mode="time" 
			:closeOnClickOverlay="true" 
			@confirm="confirm"
			@cancel="cancel"
			@change="change" 
			@close="close" 
			cancelColor="#FF82AB" 
			confirmColor="#FF82AB"
			itemHeight="80"></u-datetime-picker>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 提醒内容输入框输入内容
				iptVal: '美好的一天开始了,昨天你记账了吗?',
				// 是否展示关闭按钮
				isShowClose: false,
				show: false,
				value: '05:28',
				// 现在时间
				time:''
			};
		},
		created(){
		},
		methods: {
			showTime() {

			},
			close() {
				this[`show${this.current}`] = false
			},
			cancel() {
				this[`show${this.current}`] = false
			},
			confirm(e) {
				this[`show${this.current}`] = false
				this.result(e.value, e.mode)
			},
			change(e) {
				// console.log('change', e)
			},
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
	}
</script>

<style lang="scss">
	.remind {
		padding: 30rpx;
		font-size: 26rpx;
	}

	.remind_container {
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
	}

	.bgc {
		background-color: #F5F5DC;
		margin-bottom: 30rpx;
	}

	.nobgc {
		background-color: #fff;
	}

	.bgcpink {
		background-color: #FF82AB;
		color: #fff;
		font-size: 28rpx;
		justify-content: center;
	}

	.right {
		display: flex;
	}

	.time {
		margin-right: 30rpx;
		color: #ccc;
	}
	// /deep/.u-line-1>span{
	// 	color: #FF82AB;
	// }
</style>
